<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="/project-OA//static/plugins/bootstrap/bootstrap.css" rel="stylesheet">
		<link href="/project-OA//static/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet">
		<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
		<link href="/project-OA//static/plugins/fancybox/jquery.fancybox.css" rel="stylesheet">
		<link href="/project-OA//static/plugins/fullcalendar/fullcalendar.css" rel="stylesheet">
		<link href="/project-OA//static/plugins/xcharts/xcharts.min.css" rel="stylesheet">
		<link href="/project-OA//static/plugins/select2/select2.css" rel="stylesheet">
		<link href="/project-OA//static/css/style.css" rel="stylesheet">
		<link href="/project-OA/static/css/ztree/zTreeStyle/zTreeStyle.css" rel="stylesheet">
		<script src="/project-OA//static/plugins/jquery/jquery.js"></script>
		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!--<script src="http://code.jquery.com/jquery.js"></script>-->
<script src="/project-OA//static/plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/project-OA//static/plugins/bootstrap/bootstrap.min.js"></script>
<script src="/project-OA//static/plugins/justified-gallery/jquery.justifiedgallery.min.js"></script>
<script src="/project-OA//static/plugins/tinymce/tinymce.min.js"></script>
<script src="/project-OA//static/plugins/tinymce/jquery.tinymce.min.js"></script>
<script type="text/javascript" src="/project-OA//static/plugins/jquery-validation-1.9.0/jquery.validate.js"></script>
<!-- All functions for this theme + document.ready processing -->
<script src="/project-OA//static/js/devoops.js"></script>
<script src="/project-OA/static/plugins/ztree/jquery.ztree.all.js"></script>
<title>Insert title here</title>
<script>
var setting={
		data:{
			simpleData:{
				enable : true,
				idKey : "id",
				pIdKey : "parentId",
				rootId : "0"
			}	
		},
		callback:{
			onClick:treeonClick
		}
}		
	$.ajax({
		url:"getDocuments",
		type:"get",
		dataType:"json",
		success:function(json){
			$.fn.zTree.init($("#documentTree"),setting,json);
		}
	})

function treeonClick(event,treeId,treeNode){	
	$("#documentList").empty();	
	if(treeNode.isParent){				
		$("input[name='parentId']").attr("value",treeNode.children[0].parentId);
		$.ajax({
			url:"getChild?parentId="+treeNode.children[0].parentId+"",
			type:"get",
			dataType:"json",
			success:function(json){
				$.each(json,function(index,c){
					var line="<tr><td><img class='img-rounded'src='http://i.forbesimg.com/media/lists/people/carlos-slim-helu_50x50.jpg'/><span class='docName'>"+c.name+"</span><span style='display:none'class='docId'>"+c.id+"</span></td>"+						
						"<td><span class='docDes'>"+c.description+"</span></td>"+
						"<td>"+c.creatorName+"</td>"+
						"<td>"+c.createTime+"</td>"+
						"<td>"+c.fileUrl+"</td>"+
						"<td><button class='btn btn-primary modalBtn' data-toggle='modal' data-target='#editDocument'>编辑</button></td>"+		
						"</tr>";					
					$("#documentList").append(line);
				})
			}
		})
	}else{
		$("input[class='folderParentId']").attr("value",treeNode.id);
		$("input[class='docParentId']").attr("value",treeNode.parentId);
			var line="<tr><td><img class='img-rounded'src='http://i.forbesimg.com/media/lists/people/carlos-slim-helu_50x50.jpg'/><span class='docName'>"+treeNode.name+"</span><span style='display:none'class='docId'>"+treeNode.id+"</span></td>"+
				"<td><span class='docDes'>"+treeNode.description+"</span></td>"+
				"<td>"+treeNode.creatorName+"</td>"+
				"<td>"+treeNode.createTime+"</td>"+
				"<td>"+treeNode.fileUrl+"</td>"+
				"<td><button class='btn btn-primary modalBtn' data-toggle='modal' data-target='#editDocument'>编辑</button></td>"+	
				"</tr>";
			$("#documentList").append(line);

	}
	
	
}
</script>
</head>
<body>

<!--Start Header-->
<div id="screensaver">
	<canvas id="canvas"></canvas>
	<i class="fa fa-lock" id="screen_unlock"></i>
</div>
<div id="modalbox">
	<div class="devoops-modal">
		<div class="devoops-modal-header">
			<div class="modal-header-name">
				<span>Basic table</span>
			</div>
			<div class="box-icons">
				<a class="close-link"> <i class="fa fa-times"></i>
				</a>
			</div>
		</div>
		<div class="devoops-modal-inner"></div>
		<div class="devoops-modal-bottom"></div>
	</div>
</div>
<header class="navbar">
	<div class="container-fluid expanded-panel">
		<div class="row">
			<div id="logo" class="col-xs-12 col-sm-2">
				<a href="index">&nbsp;&nbsp;&nbsp; OA系统</a>
			</div>
			<div id="top-panel" class="col-xs-12 col-sm-10">
				<div class="row">
					<div class="col-xs-8 col-sm-4">
						<a href="#" class="show-sidebar"> <i class="fa fa-bars"></i>
						</a>
					</div>
					<div class="col-xs-4 col-sm-8 top-panel-right">
						<ul class="nav navbar-nav pull-right panel-menu">
							<li class="hidden-xs"><a href="index"
								class="modal-link"> <i class="fa fa-bell"></i> <span
									class="badge">7</span>
							</a></li>
							<li class="hidden-xs"><a class="ajax-link"
								href="/project-OA//static/ajax/calendar.html">
									<i class="fa fa-calendar"></i> <span class="badge">7</span>
							</a></li>
							<li class="hidden-xs"><a
								href="/project-OA//static/ajax/page_messages.html"
								class="ajax-link"> <i class="fa fa-envelope"></i> <span
									class="badge">7</span>
							</a></li>
							<li class="dropdown"><a href="#"
								class="dropdown-toggle account" data-toggle="dropdown">
									<div class="avatar">
										<img
											src="/project-OA//static/img/avatar.jpg"
											class="img-rounded" alt="avatar" />
									</div> <i class="fa fa-angle-down pull-right"></i>
									<div class="user-mini pull-right">
										<span class="welcome">欢迎,</span> <span>${sessionScope.employee.getName()}</span>
									</div>
							</a>
								<ul class="dropdown-menu">
									<li><div class="ajax-link">
											<a href="../logout" style="text-decoration:none;color:white"> <i class="fa fa-power-off"></i> <span
												class="hidden-sm text">注销</span>
											</a>
										</div></li>
					<li><div class="ajax-link" data-toggle="modal"
							data-target="#password-edit">
							<i class="fa fa-cog"></i><span class="hidden-sm text"><a style="text-decoration:none;color:white">修改密码</a></span>
						</div></li>
					</ul>
					</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	</div>
</header>
<!--End Header-->
<!--Start Container-->
<div id="main" class="container-fluid">
	<div class="row">
		<div id="sidebar-left" class="col-xs-2 col-sm-2">
			<ul class="nav main-menu">
				<li>
					<a href="index">
						<i class="fa fa-dashboard"></i>
						<span class="hidden-xs">首页</span>
					</a>
				</li>
			</ul>
			<ul id="documentTree" class="ztree"></ul>
		</div>
		<!--Start Content-->
		<div id="content" class="col-xs-12 col-sm-10">
			<div id="ajax-content">		
			<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">		
				<div class="box-name">
					<i class="fa fa-usd"></i> <span>文档管理</span>
				</div>				
				<div class="box-icons">
					<a class="collapse-link"> <i class="fa fa-chevron-up"></i>
					</a> <a class="expand-link"> <i class="fa fa-expand"></i>
					</a> <a class="close-link"> <i class="fa fa-times"></i>
					</a>
				</div>
				<div class="no-move"></div>				
			</div>		
						<input type="button" class="btn btn-primary" style="margin-left:205px" data-toggle="modal"
							data-target="#newFile" value="新建文件夹"/>								
						<input type="button" class="btn btn-primary"  data-toggle="modal"
							data-target="#newDocument" value="新建文档"/>	
				<table
					class="table table-striped table-hover table-heading table-datatable"
					id="datatable-1">
					<thead>
						<tr>
							<th>名称</th>
							<th>文档摘要</th>
							<th>创建者</th>
							<th>创建日期</th>
							<th>附件</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="documentList">
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>
			</div>
		</div>
		<!--End Content-->
	</div>
</div>
<!--End Container-->
<!-- 新建文件夹  模态框（Modal） -->
<div class="modal fade" id="newFile" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">新建文件夹</h4>
			</div>
			<form action="documentSave" method="post">
			<div class="modal-body">
				<input type="hidden" name="type" value="FOLDER"/>
				<input type="hidden" name="parentId" class="folderParentId"/>
				<input type="hidden" name="creatorId" value="${sessionScope.employee.id}"/>
				<input type="hidden" name="creatorName" value="${sessionScope.employee.name}"/>
				<table class="table">			
					<tr>
						<td>文件夹名字</td>
						<td><input type="text" name="name"/></td>
					</tr>
					<tr>
						<td>文件夹摘要</td>
						<td><input type="text" name="Description" id="Description" /></td>
					</tr>
				</table>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="submit" class="btn btn-primary">创建文档</button>
			</div>
			</form>
		</div>
		<!-- /.modal-content -->
	</div>
</div>
	<!-- /.modal -->
	<!-- 新建文档  模态框（Modal） -->
<div class="modal fade" id="newDocument" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">新建文档</h4>
			</div>
			<form action="documentSave" method="post">
			<input type="hidden" name="type" value="doc"/>
			<input type="hidden" name="parentId" class="docParentId"/>
			<input type="hidden" name="creatorId"  value="${sessionScope.employee.id}"/>
			<input type="hidden" name="creatorName" value="${sessionScope.employee.name}"/>
			<div class="modal-body">
				<table class="table">			
					<tr>
						<td>文档名字</td>
						<td><input type="text" name="name"/></td>
					</tr>
					<tr>
						<td>文档摘要</td>
						<td><input type="text" name="Description" id="Description" /></td>
					</tr>
					<tr>
						<td>附件</td>
						
					</tr>
				</table>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="submit" class="btn btn-primary">创建文档</button>
			</div>
			</form>
		</div>
		<!-- /.modal-content -->
	</div>
</div>
	<!-- /.modal -->
	<!-- 修改文档  模态框（Modal） -->
<div class="modal fade" id="editDocument" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">文档修改</h4>
			</div>
			<form action="documentSave" method="post">
			<input type="hidden" name="id" id="modalDocId"/>
			<input type="hidden" name="type" value="doc"/>
			<input type="hidden" name="parentId" class="docParentId"/>
			<input type="hidden" name="creatorId"  value="${sessionScope.employee.id}"/>
			<input type="hidden" name="creatorName" value="${sessionScope.employee.name}"/>
			<div class="modal-body">
				<table class="table">			
					<tr>
						<td>文档名字</td>
						<td><input type="text" name="name" id="modalDocName"/></td>
					</tr>
					<tr>
						<td>文档摘要</td>
						<td><input type="text" name="Description" id="modalDocDescription" /></td>
					</tr>
					<tr>
						<td>附件</td>
						
					</tr>
				</table>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="submit" class="btn btn-primary">修改</button>
			</div>
			</form>
		</div>
		<!-- /.modal-content -->
	</div>
</div>
	<!-- /.modal -->
</body>
<script type="text/javascript">
// Run Datables plugin and create 3 variants of settings
function AllTables(){
	TestTable1();
	TestTable2();
	TestTable3();
	LoadSelect2Script(MakeSelect2);
}
function MakeSelect2(){
	$('select').select2();
	$('.dataTables_filter').each(function(){
		$(this).find('label input[type=text]').attr('placeholder', 'Search');
	});
}
$(document).ready(function() {
	$("#documentList").on("click",".modalBtn",function(){
		console.log("click");
		console.log($(this).parent().parent().find(".docName").text());
		$("#modalDocName").val($(this).parent().parent().find(".docName").text());
		$("#modalDocDescription").val($(this).parent().parent().find(".docDes").text());
		$("#modalDocId").val($(this).parent().parent().find(".docId").text());
	});
	$("input[name='parentId']").attr("value","0");
	// Load Datatables and run plugin on tables 
	LoadDataTablesScripts(AllTables);
	// Add Drag-n-Drop feature
	$.ajax({
			url:"getChild?parentId=0",
			type:"get",
			dataType:"json",
			success:function(json){
				$.each(json,function(index,c){
					var line="<tr><td><img class='img-rounded'src='http://i.forbesimg.com/media/lists/people/carlos-slim-helu_50x50.jpg'/><span class='docName'>"+c.name+"</span></td>"+						
						"<td><span class='docDes'>"+c.description+"</span><span style='display:none'class='docId'>"+c.id+"</span></td>"+
						"<td>"+c.creatorName+"</td>"+
						"<td>"+c.createTime+"</td>"+
						"<td>"+c.fileUrl+"</td>"+
						"<td><button class='btn btn-primary modalBtn' data-toggle='modal' data-target='#editDocument'>编辑</button></td>"+						
						"</tr>";				
					$("#documentList").append(line);
				})
			}
		});
	WinMove();
});
</script>
</html>